<template>
    <van-sticky :offset-top="offsetTop">
        <div class="flex items-center bg-#ffffff h-40 px-16">
            <div v-for="(tab, index) in tabs" :key="tab.id"
                class="color-#747684 bg-#f2f2f6 text-12 rounded-20 mr-10 px-10 py-2 text-center"
                :class="{ 'active-tab': activeIndex === index }" @click="handleClick(index)">
                {{ tab.name }}
            </div>
        </div>
    </van-sticky>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

// 定义 props
const props = defineProps<{
    tabs: Array<{ id: number; name: string }>;
    activeIndex: number;
    offsetTop?: number;
}>();

// 定义 emits
const emit = defineEmits<{
    (e: 'updateActiveIndex', index: number): void;
}>();

// 处理点击事件
const handleClick = (index: number) => {
    emit('updateActiveIndex', index);
};
</script>

<style lang="css" scoped>
.active-tab {
    color: #539cd6;
    border: 1px solid #539cd6;
    background: #ffffff;
    padding: 0px 5px;
}
</style>